const app = new Vue({
	data: {
		areaData: [
			{ text: "全部", val: -1 },
			{ text: "华语", val: 7 },
			{ text: "欧美", val: 96 },
			{ text: "日本", val: 8 },
			{ text: "韩国", val: 16 },
			{ text: "其他", val: 0 },
		],
		selectedArea: -1,
		artists: [],
		page: 1,
		size: 5
	},
	async created() {
		// fetch("https://koo-music.vercel.app/artist/list?area=-1").then(res => res.json()).then(res => {
		// 	console.log(res)
		// })
		const { artists } = await fetch(`https://koo-music.vercel.app/artist/list?area=-1&limit=${this.size}`).then(res => res.json())
		this.artists = artists
		console.log(artists)
	},
	methods: {
		async handleFilter(area) {
			console.log(area)
			this.selectedArea = area
			this.page = 1
			const { artists } = await fetch(`https://koo-music.vercel.app/artist/list?area=${area}&limit=${this.size}`).then(res => res.json())
			this.artists = artists
		},
		async loadmore() {
			// page size
			this.page++
			console.log((this.page-1) * this.size)
			const { artists } = await fetch(`https://koo-music.vercel.app/artist/list?area=${this.selectedArea}&limit=${this.size}&offset=${(this.page-1) * this.size}`).then(res => res.json())
			// console.log(artists)
			this.artists = [...this.artists, ...artists]
			// this.artists = this.artists.concat(artists)
		}
	}
}).$mount("#app")
